<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:include="bootstrap :: bootstrapName"></div>
    <style>
        h1{
            text-align: center;
            background-image: -webkit-linear-gradient(top, #5bc0de, #269abc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-top: 100px;
        }
        .form-horizontal{
            color: #555555;
        }
        form{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Blog Sign</h1>
            </div>
        </div>
        <form class="form-horizontal login_form" th:action="@{/main}" method="post">
            <div class="form-group">
                <label for="inputuserBlog" class="col-sm-4 control-label">博客号:</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="userBlog" id="inputuserBlog" placeholder="博客号">
                </div>
                <span  class="col-sm-1" style="color: red;font-size: 15px" th:text="${msg}"></span>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-4 control-label">密码:</label>
                <div class="col-sm-4">
                    <input type="password" name="userPassword" class="form-control" id="inputPassword3" placeholder="密码">
                </div>
            </div>
            <div class="tips"></div>
            <div class="row">
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 管理员
                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 博主
                </label>
            </div>
            <br/>
            <div class="row">
                <div class="form-group col-md-12">
                    <div class="col-sm-offset-4 col-sm-4">
                        <button type="submit" class="btn btn-primary submit_login">登入</button>
                        <button  type="button" class="btn btn-default" id="register" data-toggle="modal" data-target="#myModal">注册</button>
                    </div>

                </div>
            </div>
        </form>
    </div>


    <!-- 注册模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title" id="myModalLabel" style="color:
                     #31b0d5;text-align: center">注册</h2>
                </div>
                <form class="form-horizontal ">
                    <div class="col-md-12 name_check_div check_info">
                        <label for="inputUserName" class="col-sm-2 control-label">昵称</label>
                        <div class="col-md-8 ">
                            <input type="text" class="form-control" id="inputUserName" placeholder="姓名">
                        </div>
                    </div>
                    <div class="password_check_div col-md-12 check_info">
                        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                        <div class="col-md-8">
                            <input type="password" class="form-control" id="inputPassword" placeholder="密码">
                        </div>
                    </div>
                    <div class="email_check_div col-md-12 check_info">
                        <label for="inputUserName" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="inputEmail" placeholder="12121@163.com">
                        </div>
                    </div>
                    <div class="tel_check_div col-md-12 check_info">
                        <label for="inputUserName" class="col-sm-2 control-label">手机号码</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="inputTel" placeholder="手机号码">
                        </div>
                        <div style="display: inline-block">
                            <button class="btn-sm btn-default" type="button" name="接受" value="code">发送</button>
                        </div>
                    </div>
                    <div class="checkCode col-md-12 check_info">
                        <label for="checkCode1" class="col-sm-2 control-label">验证码</label>
                        <div class="col-md-8"  style="display: inline-block">
                            <input type="text" style="display: inline-block" class="form-control" id="checkCode1" placeholder="验证码">
                        </div>
                    </div>
                    <div class="form-group" id="check_box">
                        <label class="radio-inline">
                            <input type="radio" name="check_radio" id="inlineRadio3" value="0"> 管理员
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="check_radio" id="inlineRadio4" value="1" checked="checked"> 博主
                        </label>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-8">
                            <button type="button" class="btn btn-primary register_submit">注册</button>
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn_close" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    //在提交之前先校准一下
    function checkFirst() {
            var name = $("#inputUserName").val();
            var regPassword = /^([a-zA-Z0-9_-]{4,16}|[\u4E00-\u9FA5]){1,10}$/;
            if(!check(regPassword,".name_check_div",name)) {
                return false;
            }
            var password = $("#inputPassword").val();
            var regPassword = /^[a-zA-Z0-9]{6,12}$/;
            if(!check(regPassword,".password_check_div",password)){
                return false;
            }
            var email =  $("#inputEmail").val();
            var regEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
            if(!check(regEmail,".email_check_div",email)){
                return false;
            }
            var tel = $("#inputTel").val();
            var regTel = /^(1[3-9])[0-9]{9}$/;
            if(!check(regTel,".tel_check_div",tel)){
                return false;
            }
    }

    $(".register_submit").on("click",function () {
        // 如果有某个元素的class为has-error就不能校验
        var elements = document.getElementsByClassName("check_info");
        var flag = true;
        //提交前先检查
        checkFirst();
        // console.log(elements);
        for(var i=0;i<elements.length;i++){
            //阻止提交
            // console.log(elements[i]);
            if(elements[i].classList.contains("has-error")){
                alert("提交失败")
                flag = false;
                return false;
            }
        }
        alert("提交成功")
        //return true;
        if(flag){
            //携带的参数
            var username = $("#inputUserName").val();
            var password = $("#inputPassword").val();
            console.log(username);
            console.log(password);
            console.log(true)
            //TODO 后面完善更详细的信息，这里后端需要给默认值给其他属性
            // var email = $("#inputEmail").val();
            // var tel = $("#inputTel").val();
            //得到单选框的值
            var radionum = $('input:radio:checked').val();
            var nowTime = new Date();
            var datas = {
                userPassword:password,
                userName:username,
                userSign:radionum,
                userGender:'男',
                createTime: nowTime,
            }
            // 发送异步请求给后端
            $.ajax({
                url: "/register",
                type: "POST",
                data: JSON.stringify(datas),
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    //alert(data)
                    alert("注册成功");
                    //自动使得按钮关闭。
                    $(".btn_close").click();
                    $(".model_register").clear();
                },
                error: function () {
                    alert("注册失败");
                }
            })
        }
        return true;
    })
    $("#register").click(function () {
        
        $(".model_register").show("slow");

        //alert("yes");
    })
    //输入的账户名
    $("#inputUserName").bind("blur",function () {
        var name = $(this).val();
        console.log(name);
        //不能提交
        //密码为，6-12位的任意字母和数字的组合
        var regPassword = /^([a-zA-Z0-9_-]{4,16}|[\u4E00-\u9FA5]){1,10}$/;
        if(!check(regPassword,".name_check_div",name)){
            return false;
        }
    })
    //密码校验
    $("#inputPassword").bind("blur",function () {
        var password = $(this).val();
        console.log(password);
        //不能提交
        var regPassword = /^[a-zA-Z0-9]{6,12}$/;
        if(!check(regPassword,".password_check_div",password)){
            return false;
        }
    })
    //email校验
    $("#inputEmail").bind("blur",function () {
        var email = $(this).val();
        console.log(email);
        // 1、不能以0字开头
        // 2、
        // 3、必须是数字与字母组成，长度为2-10位
        // 4、结尾一组，字母长度为2-4位
        // 5、 .字母，最少一组，最多三组
        var regEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        if(!check(regEmail,".email_check_div",email)){
            return false;
        }
    })
    //手机号码校验
    $("#inputTel").bind("blur",function () {
        var tel = $(this).val();
        console.log(tel);
        //不能提交
        var regTel = /^(1[3-9])[0-9]{9}$/;
        if(!check(regTel,".tel_check_div",tel)){
            return false;
        }
    })
    //发送ajax请求
    // 校准是否符合
    function check(regExp,divName,checkString) {
        //用户名正则
        if(regExp.test(checkString)){
            $(divName).removeClass("has-error");
            $(divName).addClass("has-success");
            return true;
        }else{
            //将颜色天成
            $(divName).addClass("has-error");
            //alert("不符合要求");
            return false;
        }

    }
    
    //对后端发送异步请求，访问是否资源跳转
    $(".submit_login").click(function () {
        //访问提交路径
        var target_url = $(".login_form").attr("action");
        var data = $(".login_form").serialize();
        $.ajax({
            url: target_url,
            data: data,
            type: "POST",
            cache: false,
            dataType: 'json',
            success:function(data){
                if(data.toUrl!=='/'){
                    window.location.href=data.toUrl;
                }else{
                    alert("账号或者密码错误");
                    window.location.href='/';
                }
            },
            error:function(data){
                $(".tips").innerHTML("密码错误");
            }
        });
    })

</script>
</html>